<template>
	<view>
		<view class="search-box">
			<mSearch class="mSearch-input-box" :mode="2" :value="''" button="inside" placeholder="请输入搜索内容" @tap="goSearch"></mSearch>
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for='(item,index) in bannerList' :key='index'>
				<image class="swiper-image" :src="baseURL+item.url" @click="goProduct(item.to_page)"></image>
			</swiper-item>
		</swiper>
		<block v-for='(items,index) in itemcontainer' :key='index'>
			<item-container 
			v-if="items.id==1||items.id==2||items.id==3"
			:num='items.id' 
			:banner="items"
			:list='items.showData.detail'
			:baseURL='baseURL'
			>
			</item-container>
			<list-mall 
			v-else-if="items.id==4||items.id==5||items.id==6||items.id==7"
			:num='items.id'
			:banner="items"
			:list='items.showData.detail'
			:baseURL='baseURL'
			>
			</list-mall>
		</block>
		<!-- 第一个item-container -->
		<!-- <item-container :num='itemcontainer.describe' :banner='itemcontainer1.banner' :list='itemcontainer1.data1'></item-container> -->
		<!-- 第二个item-container -->
		<!-- <item-container :num='itemcontainer2.noswipernum3' :banner='itemcontainer2.banner' :list='itemcontainer2.data1'></item-container> -->
		<!-- 第三个item-container -->
		<!-- <item-container :num='itemcontainer3.noswipernum4' :banner='itemcontainer3.banner' :list='itemcontainer3.data1'></item-container> -->
		<!-- 第一个list-mall -->
		<!-- <list-mall :num='listmall1.mallnum2' :banner='listmall1.mallbanner' :list='listmall1.malldata'></list-mall> -->
		<!-- 第二个list-mall -->
		<!-- <list-mall :num='listmall2.mallnum3' :banner='listmall2.mallbanner' :list='listmall2.malldata'></list-mall> -->
		<!-- 第三个list-mall -->
		<!-- <list-mall :num='listmall3.mallnum1' :banner='listmall3.mallbanner' :list='listmall3.malldata'></list-mall> -->
		<!-- 第四个list-mall -->
		<!-- <list-mall :num='listmall4.mallnum4' :banner='listmall4.mallbanner' :list='listmall4.malldata'></list-mall> -->
		
		<!-- 第一个sola -->
		<!-- <sola :banner='sola.solabanner' :list="sola.solalist"></sola> -->
		
	</view>
</template>

<script>
	import itemContainer from '@/components/shopComponents/index/item-container.vue'
	import listMall from '@/components/shopComponents/index/list-mall.vue'
	import sola from '@/components/shopComponents/index/sola.vue'
	import mockData from '@/data/index.js'
	
	import mSearch from '@/components/mehaotian-search-revision/mehaotian-search-revision.vue';
	export default {
		components: {
			itemContainer,
			listMall,
			sola,
			
			mSearch
		},
		data() {
			return {
				baseURL:this.$API.baseURL,
				bannerList:[],
				itemcontainer:[],
				
				itemcontainer2:{},
				itemcontainer3:{},
				listmall1:{},
				listmall2:{},
				listmall3:{},
				listmall4:{},
				sola:{},
					
					
				}
		},
		onLoad() {
			
		},
		onReady(){
			// this.itemcontainer1=mockData.itemcontainer1;
			
			// this.itemcontainer2=mockData.itemcontainer2;
			// this.itemcontainer3=mockData.itemcontainer3;
			// this.listmall1=mockData.listmall1;
			// this.listmall2=mockData.listmall2;
			// this.listmall3=mockData.listmall3;
			// this.listmall4=mockData.listmall4;
			// this.sola=mockData.sola

			
			this.getMallLunbo();
			this.getMallIndex();
		},
		methods:{
			goSearch(){
				uni.navigateTo({
					url:'/pages/HM-search/HM-search'
				})
			},
			//跳转商品详情
			goProduct(id){
				uni.navigateTo({
					url:`/pages/shopPages/goods/detail/detail?id=`+id,
				})
			},
			//1.轮播图
			getMallLunbo(){
				uni.request({
					url:this.$API.getMallLunbo,
					method:"POST",
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data.message=='success'){
							this.bannerList = res.data.data
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			//2.首页模块参数
			getMallIndex(){
				uni.request({
					url:this.$API.getMallIndex,
					method:"POST",
					header:this.$API.get_head(),
					success: (res) => {
						if(res.data.message=='success'){
							this.itemcontainer = res.data.data
							// this.itemcontainer.push(res.data.data[0])
							
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			}
		}
		
	}
</script>

<style lang="scss">
	swiper {
		height: 400upx;
		.swiper-image {
			height: 400upx;
			width: 690upx;
			margin: 0 30upx;
			border-radius: 15upx;
		}
	}

	.search-box {width:95%;background-color:rgb(242,242,242);padding:15upx 2.5%;display:flex;justify-content:space-between;}
	.search-box .mSearch-input-box{width: 100%;}
	.search-box .input-box {width:85%;flex-shrink:1;display:flex;justify-content:center;align-items:center;}
	.search-box .search-btn {width:15%;margin:0 0 0 2%;display:flex;justify-content:center;align-items:center;flex-shrink:0;font-size:28upx;color:#fff;background:linear-gradient(to right,#ff9801,#ff570a);border-radius:60upx;}
	.search-box .input-box>input {width:100%;height:60upx;font-size:32upx;border:0;border-radius:60upx;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 3%;margin:0;background-color:#ffffff;}
	
</style>
